<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="cw" uri="/widget-tags"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>列表框</title>
		<cw:base></cw:base>
		<script type="text/javascript">
			function loadFormWithListBox(){
				Wonders.utils.formLoad('formWithListBox',
			    	'${pageContext.request.contextPath}/demoform/loadFormWithListBox.action',
			    	{},
			    	function(form,action){
			    		var json = Ext.decode(action.response.responseText).result[0];
			    	}
			    );
			}
			
			function submitFormWithListBox(){
				Wonders.utils.formSubmit(Ext.getCmp("submitListBoxBtn"), 'formWithListBox',
					function(form,action){
						var json = Ext.decode(action.response.responseText).result[0];
						Wonders.Msg.info("保存成功！",'提示',function(){Ext.getCmp('submitListBoxBtn').enable();__WSSIP_GENERATE_GUID__();});
						return false;
					},
					null,
					function(form,action){
						Ext.getCmp('submitListBoxBtn').enable();
						__WSSIP_FAILURE_HANLDER__(form,action);
						return false;
					}
				);
			}
		</script>
	</head>
	<body>
		<cw:form id="formWithListBox" ajax="true" url="${pageContext.request.contextPath}/demoform/submitFormWithListBox.action" waitMsg="提交中...">
			<ul>
				<li>
					<b> 基本的数据选择框，数据加载方式和下拉框一样，区别在于支持多选， 选择项的数据可以是本地数据也可以是远程加载数据，远程数据需要设置url</b>
				</li>
			</ul>
			<br>
			<table>
				<tr>
					<td>
						静态可选列表框：
					</td>
					<td>
						<cw:listBox id="multiselect1" property="multiselect1" dataFields="['value', 'text']" 
							data="[[440303,'罗湖区'], [440304,'福田区'],[440305,'南山区'],[440306,'宝安区'],[440307,'龙岗区'],
							[440308,'盐田区'],[440309,'光明新区'],[440310,'坪山新区'],[440311,'大鹏新区'],[440312,'龙华新区']]" />
					</td>
					<td>
						动态可选列表框：
					</td>
					<td>
						<cw:listBox id="multiselect2" property="multiselect2" remote="true" url="${pageContext.request.contextPath}/demoform/loadCodeInfo.action"/>
					</td>
					<td>
						<cw:button id="loadListBoxBtn" text="远程加载" onclick="loadFormWithListBox();" />
					</td>
					<td>
						<cw:button id="submitListBoxBtn" text="保存" onclick="submitFormWithListBox();" />
					</td>
				</tr>
			</table>
		</cw:form>
		<cw:theme></cw:theme>
		<script type="text/javascript">
			Ext.onReady(function(){
				resetHeight("listBoxFrame");
			})
		
			function resetHeight(frame) {
				var ifm = parent.document.getElementById(frame);
				var obj = document.body;
				var oStyle = obj.currentStyle? obj.currentStyle : window.getComputedStyle(obj, false);
				var initHeight = parseInt(document.body.clientHeight+parseInt(oStyle["margin-top"])+parseInt(oStyle["margin-bottom"]));
				ifm.height = parseInt(initHeight);
			}
		</script>
	</body>
</html>
